<template>
  <div class="login">
    <!-- 登录页面 -->

    <el-form :model="user" status-icon :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
      <el-form-item label="" prop="email">
        <el-input type="text" v-model.trim="user.email" auto-complete="off" :placeholder="lang.text1" :maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input type="password" v-model.trim="user.password" auto-complete="off" :placeholder="lang.text2"  :maxlength="50" @keyup.enter.native="submitForm('ruleForm')"></el-input>
      </el-form-item>
      <el-form-item class="radius">
        <el-checkbox  v-model="user.memory">{{lang.text3}}</el-checkbox>

        <span class="forget" @click="route('/retrieve')">{{lang.text4}}</span>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="status" @click="submitForm('ruleForm')" class="sure">{{lang.text5}}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="route('/register')">{{lang.text6}}</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    var validateEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('邮箱不为空'))
      } else if (!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/).test(value)) {
        return callback(new Error('请输入正确格式邮箱'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      lang: {
        text1: '邮箱',
        text2: '密码',
        text3: '记住登录',
        text4: '忘记密码？',
        text5: '登录',
        text6: '沒有账户？点击注册',
        text7: '钱包地址',
        text8: '发送验证码',
        text9: '验证码',
        text10: '我已阅读并同意',
        text11: '《用户协议》',
        text12: '注册',
        text13: '返回',
        text14: '如果您在收件箱沒有找到邮件，不要忘记去垃圾邮箱看看哦！',
        text15: '我知道啦',
        text16: '用户协议',
        text17: '确认密码',
        text18: '提交'
      },
      user: {
        email: ' ',
        password: ' ',
        memory: true
      },
      rules: {
        email: [
          { validator: validateEmail, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      status: false
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.status = true
          let res = await this.$store.dispatch('login', {
            username: this.user.email,
            password: this.user.password,
            language: 'cn',
            memory: this.user.memory ? 1 : 0
          })
          this.status = false
          if (res.RET === 1) {
            this.route('/')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields()
      }
    },
    route (r) {
      this.$router.push({path: r, query: this.$route.query})
    }
  },
  created () {
    if (this.$store.state.token.access_token) {
      this.$router.push('/')
      return
    }
    let token = JSON.parse(window.localStorage.getItem('LOCALTOKEN') || '{ "access_token": "" }')
    console.log(token)
    if (token.access_token) {
      this.$store.commit('INIT', token)
      this.$router.push('/')
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.resetForm('ruleForm')
      let _this = this
      setTimeout(function () {
        _this.user.email = ''
      }, 700)
      this.user.password = ''
    })
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/variable.scss';

.login {
  padding-top: 20px;
  // padding-bottom: 20px;

  .el-form {
    margin: 0 auto;
    max-width: 300px;

    .el-form-item {
      .el-button {
        width: 100%;
      }
    }

    .forget {
      float: right;
      cursor: pointer;
      font-size: 12px;
      text-decoration: underline;
    }
  }
}
</style>
